<html>
<head>
<title> Login </title>
<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<link rel="stylesheet" href="style.css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/login.js"></script>
</head>
<body onload="matrixLogin.onLoad()">
    <center>
        <br/>
        <h1>Log in with one of the following methods</h1>

        <span id="feedback" style="color: #f00"></span>
        <br/>
        <br/>

        <div id="loading">
            <img src="spinner.gif" />
        </div>

        <div id="cas_flow" class="login_flow" style="display:none"
                onclick="gotoCas(); return false;">
            CAS Authentication: <button id="cas_button" style="margin: 10px">Log in</button>
        </div>

        <br/>

        <form id="password_form" class="login_flow" style="display:none"
                onsubmit="matrixLogin.password_login(); return false;">
            <div>
                Password Authentication:<br/>

                <div style="text-align: center">
                    <input id="user_id" size="32" type="text" placeholder="Matrix ID (e.g. bob)" autocapitalize="off" autocorrect="off" />
                    <br/>
                    <input id="password" size="32" type="password" placeholder="Password"/>
                    <br/>

                    <button type="submit" style="margin: 10px">Log in</button>
                </div>
            </div>
        </form>

        <div id="no_login_types" type="button" class="login_flow" style="display:none">
            Log in currently unavailable.
        </div>
    </center>
</body>
</html>
